<template>
    <div class="search-history">
        <div class="search-history-title">
            <div class="title">搜索历史</div>
            <van-icon v-if="showEdit" class="delete" name="delete" size="1.125rem" @click="editTag" />
            <div class="edit" v-else>
                <div class="edit-del" @click="delAll">全部删除</div>
                <div class="edit-ok" @click="delFinish">完成</div>
            </div>
        </div>
        <div class="search-history-tag">
            <div class="history-tags">
                <div class="history-tag" v-for="(item, index) in historyList" :key="index" @click="clickTag(item)">
                    <div class="history-word">{{ item }}</div>
                    <van-icon v-show="!showEdit" class="search-delete" name="close" size="1rem"
                        @click.stop="delTag(index)" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['historyTags'],
    data() {
        return {
            showEdit: true,
            historyList: []
        }
    },
    methods: {
        delFinish() {
            this.showEdit = true
        },
        delAll() {
            this.showEdit = true
            this.historyList = []
            localStorage.setItem("zxjtSearchHistory", JSON.stringify(this.historyList))
            this.$emit('updateHistoryList')
            this.sensorsTrack('全部删除')
        },
        editTag() {
            this.showEdit = false
        },
        delTag(index) {
            this.historyList.splice(index, 1)
            localStorage.setItem("zxjtSearchHistory", JSON.stringify(this.historyList))
        },
        clickTag(item) {
            this.$emit("clickTag", item)
            //点击历史搜索词打点
            this.sensorsTrack(item)
        },
        //搜索历史打点
        sensorsTrack(functionName) {
            $sensorsTrack('financing_videoZoneSearchPageButtonClick', {
                module_name: '历史搜索',
                function_name: functionName
            });
        }
    },
    watch: {
        historyTags: {
            handler(newValue) {
                this.historyList = newValue
            },
            immediate: true
        }
    }
}
</script>

<style scoped lang="less">
.search-history {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: auto;
    margin-top: 20px;
    .search-history-title {
        margin: 0 auto;
        width: 100%;
        height: 37px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            color: #262E40;
            font-size: 26px;
            font-weight: 600;
            margin-left: 40px;
        }

        .delete {
            margin-right: 20px;
        }

        .edit {
            width: 197px;
            margin-right: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .edit-del {
                font-size: 26px;
                color: #9AA2B3;
                font-weight: 400;
                border-right: 1px #9AA2B3 solid;
                padding-right: 20px;
            }

            .edit-ok {
                font-size: 26px;
                color: #FF5A00;
                font-weight: 400;
            }
        }
    }

    .search-history-tag {
        margin-left: 30px;
        margin-top: 26px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;

        .history-tags {
            height: 100%;
            display: flex;
            flex-wrap: wrap;

            .history-tag {
                height: 100%;
                width: auto;
                line-height: 41.6px;
                background-color: rgba(245, 246, 249, 1);
                border-radius: 50px;
                padding: 7px 19px;
                margin-right: 30px;
                margin-bottom: 10px;
                font-size: 28px;
                color: #757E93;
                display: flex;

                .history-word {
                    max-width: 200px;
                    height: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-right: 10px;
                }

                .search-delete {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                }
            }
        }
    }
}
</style>